<script setup>
import {
    Edit,
    Delete,
    Search,
    Plus
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import {StudentPageService,getDeptListService,getMajorListService,updateStudentByID
    ,getClassListService,deleteStudentByID,getStudentByID} from '@/api/adm/student.js'
//导入消息框
import {ElMessage,ElMessageBox} from 'element-plus'
//导入token状态
import { useTokenStore } from '@/stores/token.js'

//调用useTokenStore得到状态
const tokenStore = useTokenStore();
//分页条数据模型
const currentPage = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(6)//每页条数
const loading = ref(true)
//入学年份下拉框数据
const enterYearList=[
    {enterYear:"2024",key:"2024"},
    {enterYear:"2023",key:"2023"},
    {enterYear:"2022",key:"2022"},
    {enterYear:"2021",key:"2021"},
    {enterYear:"2020",key:"2020"},
    {enterYear:"2019",key:"2019"},
    {enterYear:"2018",key:"2018"},
    {enterYear:"2017",key:"2017"},
    {enterYear:"2016",key:"2016"},
    {enterYear:"2015",key:"2015"},
    {enterYear:"2014",key:"2014"},
    {enterYear:"2013",key:"2013"},
    {enterYear:"2012",key:"2012"},
    {enterYear:"2011",key:"2011"}
]
//院系ID
const checkDeptID=ref(null)
//入学年份
const checkEnterYear=ref('2021')
const majorList=ref()
const checkClassID=ref(null)
const classList=ref()
//专业
const checkMajorID=ref(null)
//院系下拉框
const deptList=ref()

//模糊条件
const keyWord=ref()
//
const studentPage=ref()
const getStudentPage = async () => {
    const getStudentPageModel = {
        currentPage: currentPage.value?currentPage.value:1,
        pageSize: pageSize.value?pageSize.value:1,
        entryYear:checkEnterYear.value?checkEnterYear.value:null,
        deptID:checkDeptID.value?checkDeptID.value:null,
        majorID:checkMajorID.value?checkMajorID.value:null,
        keyword:keyWord.value?keyWord.value:null,
        classID:checkClassID.value
    }
    let result = await StudentPageService(getStudentPageModel);
    //渲染列表数据
    studentPage.value = result.data.records;
    total.value=result.data.total;
    loading.value=false
}
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getStudentPage()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    getStudentPage()
}
const getDeptList = async ()=>{
    let result = await getDeptListService();
    deptList.value = result.data;
    // deptList.value.splice(0,1)
    checkDeptID.value=deptList?.value[0]?.deptID
}
const getMajorList= async()=>{
    checkMajorID.value=''
    const model={
        deptID:checkDeptID.value?checkDeptID.value:null
    }
    let result= await getMajorListService(model)
    majorList.value=result.data
    checkMajorID.value=majorList.value[0]?.majorID
    getClassList()
}
const getClassList= async()=>{
    checkClassID.value=''
    const model={
        majorID:checkMajorID.value?checkMajorID.value:null
    }
    let result= await getClassListService(model)
    classList.value=result.data
    checkClassID.value=classList.value[0]?.classID
    getStudentPage()
}
getDeptList()
getMajorList()
getClassList()
getStudentPage()
const check=()=>{
    getStudentPage()
}
const checkedDeptID=()=>{
    getMajorList()
}
const checkedMajorID=()=>{
    getClassList()
    getStudentPage()
}
const getMajorList1= async()=>{
    const model={
        deptID:studInfo.value.deptID?studInfo.value.deptID:null
    }
    let result= await getMajorListService(model)
    majorList.value=result.data
    getClassList1()
}
const getClassList1= async()=>{
    const model={
        majorID:studInfo.value.majorID
    }
    let result= await getClassListService(model)
    classList.value=result.data
}
const checkedDept=()=>{
    studInfo.value.majorID=''
    getMajorList1()
}
const checkedMajor=()=>{
    studInfo.value.classID=''
    getClassList1()
}
// const updateChange=async (row)=>{
//     const model={
//         stuID:row.stuID
//     }
//     let result=await getStudentByID(model)
// }
// const deletProjectByID=async (row)=>{
//     const model={
//         stuID:row.stuID
//     }
//     deleteStudentByID(model)
// }
//用于弹窗展示标志flag
const dialogVisible=ref(false)
//学生数据模型
const studInfo=ref({
    stuID:'',
    studName:'',
    email:'',
    entryYear:'',
    idcard:'',
    majorID:'',
    majorName:'',
    calssId:"",
    className:"",
    deptID:"",
    deptName:"",
    phoneNumber:'',
    studBirth:'',
    studSex:'',
    studNation:'',
    studNative:'',
    studState:'',
    avater:'',
    studMemo:"",
})
const showDialog=async(row)=>{
    const model={
        stuID:row.stuID
    }
    let result=await getStudentByID(model)
    studInfo.value=result.data
    getDeptList()
    getMajorList1()
    dialogVisible.value=true
}
const updateStudent=async()=>{
    if(studInfo===null){
        ElMessage.error("学生信息不存在！")
        return
    }
    let result=await updateStudentByID(studInfo.value)
    dialogVisible.value=false
    ElMessage.success(result.data? result.data:'修改成功')
}
const uploadSuccess = (result)=>{
    studInfo.value.avater= result.data;
}
const deletStudentByID= async (row)=>{
    ElMessageBox.confirm(
        '你确认删除学生名为：'+row.studName+'的学生信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(async () => {
            let result = await deleteStudentByID({stuID:row.stuID})
            ElMessage.success("删除成功！");
            //再次调用 getSportsPage()，获取所有项目
            getStudentPage()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//标题
const title=ref('查看学生信息')
const rules = {
    studName: [
        { required: true, message: '请输入用户昵称', trigger: 'blur' },
        {
            pattern: /^\S{2,10}$/,
            message: '昵称必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    phoneNumber: [
        { required: true, message: '请输入联系电话', trigger: 'blur' }
    ]
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span><strong>学生基本信息</strong></span>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="入学年份"style="width: 150px;">
                <el-select v-model="checkEnterYear" class="m-2" placeholder="全部"  @change="check">
                <el-option
                        v-for="item in enterYearList"
                        :value="item.key"
                        :key="item.key"
                        :label="item.enterYear"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="学院"style="width: 200px;">
                <el-select v-model="checkDeptID" class="m-2" placeholder="全部"  @change="checkedDeptID">
                <el-option
                        v-for="item in deptList"
                        :value="item.deptID"
                        :key="item.deptID"
                        :label="(item.deptID?item.deptID+'|':'')+item.deptName"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="专业"style="width: 200px;">
                <el-select v-model="checkMajorID" class="m-2" placeholder="全部"  @change="checkedMajorID">
                <el-option
                        v-for="item in majorList"
                        :value="item.majorID"
                        :key="item.majorID"
                        :label="item.majorName"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="班级"style="width: 150px;">
                <el-select v-model="checkClassID" class="m-2" placeholder="全部"  @change="checkedClassID">
                <el-option
                        v-for="item in classList"
                        :value="item.classID"
                        :key="item.classID"
                        :label="item.className"
                />
            </el-select>
            </el-form-item>
        </el-form>
        <el-form inline>
            <el-form-item label="学号或姓名(模糊查询)">
                <el-input placeholder="请输入信息" v-model="keyWord" :suffix-icon="Search"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"@click="getStudentPage()">搜索</el-button>
                <el-button @click="keyWord='',checkEnterYear=null,checkDeptID=null,checkClassID=null,
                checkMajorID=null,checkDeptID=null,getSportsPage()">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 学生列表 -->
        <el-table  v-loading="loading"
                element-loading-text="Loading..."
                :element-loading-spinner="svg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                :data="studentPage" style="width: 100%">
                <el-table-column type="index" width="55" label="序号"/>
            <el-table-column label="入学年份" prop="entryYear" width="100%"></el-table-column>
            <el-table-column label="学号"  show-overflow-tooltip effect="light">
                <template #default="{ row }">
                        <el-tooltip content="点击查看信息" effect="light">
                    <el-link type="primary"  target="_blank"
                    :underline="false" @click="showDialog(row)">
                        {{ row.stuID?row.stuID:"" }}
                    </el-link>
                        </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="studName"width="100%"></el-table-column>
            <el-table-column label="性别" prop="studSex"show-overflow-tooltip></el-table-column>
            <el-table-column label="学院" prop="deptName"show-overflow-tooltip></el-table-column>
            <el-table-column label="专业" prop="majorName"show-overflow-tooltip></el-table-column>
            <el-table-column label="班级" prop="className"width="200"show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" prop="studState"width="200"show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click=showDialog(row)></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click=deletStudentByID(row)></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="未查找到数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8 ,10]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
<!-- 点击学号展示信息 -->
<el-dialog v-model="dialogVisible" :title="title" width="50%">
    <el-form :model="studInfo" :rules="rules" label-width="100px" style="padding-right: 30px">
        <el-form-item label="照片:" prop="studInfo.avater" inline>
            <el-upload
             class="avatar-uploader"
            action="../api/upload"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :headers="{'Authorization':tokenStore.token}">
            <img v-if="studInfo.avater" :src="studInfo.avater" style="width: 100px;height:80px">
            <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
            </el-upload>  
        </el-form-item>

        <el-form-item label="学号：" prop="stuID">
            <el-input v-model="studInfo.stuID" minlength="1" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="studName">
            <el-input v-model="studInfo.studName" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="studSex">
            <el-input v-model="studInfo.studSex" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phoneNumber">
            <el-input v-model="studInfo.phoneNumber" minlength="1" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="入学年份：" prop="entryYear">
            <el-input v-model="studInfo.entryYear" minlength="1" maxlength="15" disabled></el-input>
        </el-form-item>
        <el-form-item label="学院："style="width: 100%;">
                <el-select v-model="studInfo.deptID" class="m-2" placeholder="全部"  @change="checkedDept()">
                <el-option
                        v-for="item in deptList"
                        :value="item.deptID"
                        :key="item.deptID"
                        :label="(item.deptID?item.deptID+'|':'')+item.deptName"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="专业"style="width: 100%;">
                <el-select v-model="studInfo.majorID" class="m-2" placeholder="全部"  @change="checkedMajor()">
                <el-option
                        v-for="item in majorList"
                        :value="item.majorID"
                        :key="item.majorID"
                        :label="item.majorName"
                />
            </el-select>
            </el-form-item>
        <el-form-item label="班级"style="width: 100%;">
                <el-select v-model="studInfo.classID" class="m-2" placeholder="全部" >
                <el-option
                        v-for="item in classList"
                        :value="item.classID"
                        :key="item.classID"
                        :label="item.className"
                />
            </el-select>
            </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateStudent()"> 保存 </el-button>
            </span>
    </template>
</el-dialog>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>